<template>
  <div class="home">
    <div class="home-list">
      <div class="logo">
        <img src="../assets/images/logo.png" />
      </div>
      <div class="photo">
        <div class="photo-pic">
          <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
            <div class="flipper">
              <div class="front">
                <!-- 前面内容 -->
                <img alt="用户头像" :src="userinfo.pictureUrl?userinfo.pictureUrl: imgUrl" />
              </div>
              <div class="back" >
                <!-- 背面内容 -->
                <span class="img-cover" :style="{backgroundImage: backImg}" >
                  <span class="bg-cover"></span>
                  <Button class="btn button" type="primary" size="small">退出登录</Button>
                  <Button class="button" type="primary" size="small">日报系统</Button>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="user-name">
        <span>{{userinfo.realname}}</span><br/>
        <span class="signature">{{userinfo.sign?userinfo.sign:'这个人很懒,什么都没有留下'}}</span>
      </div>
      <div class="module-list">
        <Menu class="menu-list" width="100%" accordion @on-select="route">
          <Submenu name="1">
            <template slot="title">
              <Icon type="ios-paper"></Icon>
              人员资料管理
            </template>
            <MenuItem name="userInfo">基本资料</MenuItem>
            <MenuItem name="userQuery">查看成员资料</MenuItem>
          </Submenu>
          <Submenu name="2">
            <template slot="title">
              <Icon type="ios-people"></Icon>
              会议管理
            </template>
            <!--<MenuItem name="meeting">会议管理-1</MenuItem>-->
            <MenuItem name="meetingInfo">会议信息管理</MenuItem>
            <MenuItem name="meetingRoom">会议室管理</MenuItem>
          </Submenu>
          <Submenu name="3">
            <template slot="title">
              <Icon type="stats-bars"></Icon>
              请假管理
            </template>
            <MenuItem name="sendLeave">请假</MenuItem>
            <MenuItem name="leaveList">请假记录</MenuItem>
          </Submenu>
          <Submenu name="4">
            <template slot="title">
              <Icon type="ios-paper"></Icon>
              节假日管理
            </template>
            <MenuItem name="holiday">节假日管理</MenuItem>
          </Submenu>
          <Submenu name="5">
            <template slot="title">
              <Icon type="ios-paper"></Icon>
              系统管理
            </template>
            <MenuItem name="roleMange">角色管理</MenuItem>
            <MenuItem name="assignRole">角色分配</MenuItem>
            <MenuItem name="funcManage">功能权限</MenuItem>
            <!-- <MenuItem name="Orgs">节假日管理-2</MenuItem> -->
          </Submenu>
        </Menu>
      </div>
    </div>
    <div class="home-box">
      <div class="home-context">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from 'vuex'
export default {
  name: 'Home',
  components: {},
  data() {
    return {
      openNames: [this.$route.matched[0].name],
      imgUrl: require('../assets/images/menber1.jpg')
    }
  },
  computed: {
    ...mapState({
      userinfo: ({ user }) => user.userinfo,
      userID: ({ user }) => user.userID
    }),
    backImg() {
      const u =
        this.userinfo && this.userinfo.pictureUrl
          ? this.userinfo.pictureUrl
          : this.imgUrl;
      return `url(${u}) `;
    }
  },
  mounted() {
    if (!this.userinfo || !this.userinfo.realname) {
      this.getUserInfo({type: 'get', id: this.userID}).then((suc) => {
        this.GET_USERINFO(suc.data)
      }).catch((err) => {
        console.log(err)
        this.$Notice.error({title: '失败', desc: '获取失败！'})
      })
    }
  },
  methods: {
    ...mapMutations(['GET_USERINFO']),
    ...mapActions(['getUserInfo']),
    route(name) {
      this.$router.push({ path: name })
    }
  }
}
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex: 380px auto;
}

.home-list {
  width: 380px;
  height: 100%;
  color: #fff;
  padding: 0 20px 0 8px;
  margin-right: 20px;
  border-right: 1px solid #fff;
  .logo img {
    width: 340px;
    margin-bottom: 40px;
  }
  .photo {
    text-align: center;
    .photo-pic {
      display: inline-block;
      width: 178px;
      height: 178px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 0 6px 4px rgba(248, 248, 248, 0.5);
      margin-bottom: 10px;
      position: relative;
      img,
      .img-cover {
        width: 178px;
        height: 178px;
        border-radius: 50%;
        position: absolute;
        left: 0;
        cursor: pointer;
        z-index: 1;
      }
      .img-cover {
        background-size: 178px 178px;
        background-color: rgba(248, 248, 248, 0.4);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .btn {
          margin-bottom: 15px;
        }
        .button {
          z-index: 2;
        }
        .bg-cover {
          width: 178px;
          height: 178px;
          position: absolute;
          z-index: 1;
          background-color: rgba(255, 255, 255, 0.5);
        }
      }
      .flip-container {
        perspective: 1000;
      }
      .flip-container:hover .flipper,
      .flip-container.hover .flipper {
        transform: rotateY(180deg);
      }
      .flip-container,
      .front,
      .back {
        width: 100%;
        height: 100%;
      }
      .flipper {
        transition: 0.6s;
        transform-style: preserve-3d;
        position: relative;
      }
      .front,
      .back {
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
      }
      .front {
        z-index: 2;
      }
      .back {
        transform: rotateY(180deg);
      }
    }
  }
  .user-name {
    text-align: center;
    font-size: 24px;
    margin-bottom: 45px;
    span {
      display: inline-block;
      padding: 8px;
      border-bottom: 1px solid #f8f8f8;
    }
    .signature {
      font-weight: 100;
      padding: 15px;
      font-size: 14px;
      border: 0 none;
      width: 350px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .module-list {
    border-top: 1px solid #f8f8f8;
    padding-top: 20px;
  }
}

.home-box {
  padding: 20px;
  width: ~'calc(100% - 380px)';
  height: 100%;
  min-width: 1100px;
  border: 1px solid #fff; // margin-right: 8px;
  .home-context {
    width: 100%;
    height: 100%;
    background-color: #f8f8f8;
  }
}
</style>
